<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script id="paginateTemplate" type="x-tmpl-mustache">
<div class="col-xs-6">
    <div class="dataTables_info" id="dynamic-table_info" role="status" aria-live="polite">
        总共 {{total}} 中的 {{from}} ~ {{to}}
    </div>
</div>

<div class="col-xs-6">
    <div class="dataTables_paginate paging_simple_numbers" id="dynamic-table_paginate">
        <ul class="pagination">
            <li class="paginate_button previous {{^firstUrl}}disabled{{/firstUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="1" data-url="{{firstUrl}}" class="page-action">首页</a>
            </li>
            <li class="paginate_button {{^beforeUrl}}disabled{{/beforeUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{beforePageNo}}" data-url="{{beforeUrl}}" class="page-action">前一页</a>
            </li>
            <li class="paginate_button active" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-id="{{pageNo}}" >第{{pageNo}}页</a>
                <input type="hidden" class="pageNo" value="{{pageNo}}" />
            </li>
            <li class="paginate_button {{^nextUrl}}disabled{{/nextUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{nextPageNo}}" data-url="{{nextUrl}}" class="page-action">后一页</a>
            </li>
            <li class="paginate_button next {{^lastUrl}}disabled{{/lastUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{maxPageNo}}" data-url="{{lastUrl}}" class="page-action">尾页</a>
            </li>
        </ul>
    </div>
</div>
</script>

<script type="text/javascript">
    <%--接收参数--%>
    <%--定义mustache模板--%>
    var paginateTemplate = $('#paginateTemplate').html();
    Mustache.parse(paginateTemplate);

    function renderPage(url,total,pageNo,pageSize,currentSize,idElement,callback){
        // 最大页数
        var maxPageNo = Math.ceil(total / pageSize);
        // 定义起始值
        var paramStartChar = url.indexOf("?") > 0 ? "&" : "?" ;
        // 从第几页开始
        var from = (pageNo - 1) * pageSize + 1 ;
        // 到第几页
        // var to = (from + currentSize - 1) > total ? total :  (from + currentSize - 1);
        var view = {
            from       : from > total ? total : from ,
            to         : (from + currentSize - 1) > total ? total :  (from + currentSize - 1),
            total      : total,
            pageNo     : pageNo,
            maxPageNo  : maxPageNo ,
            nextPageNo : pageNo >= maxPageNo ? maxPageNo : (parseInt(pageNo)  + 1),
            beforePageNo : pageNo == 1 ? 1 : (pageNo - 1),
            firstUrl   : (pageNo == 1) ? '' : (url + paramStartChar + "pageNo=1&pageSize="+pageSize),
            beforeUrl  : (pageNo == 1) ? '' : (url + paramStartChar + "pageNo=" + (pageNo - 1) + "&pageSize="+pageSize),
            nextUrl    : (pageNo >= maxPageNo) ? '' : (url + paramStartChar + "pageNo=" + (parseInt(pageNo) + 1)  + "&pageSize="+pageSize),
            lastUrl    : (pageNo >= maxPageNo) ? '' : (url + paramStartChar + "pageNo=" + maxPageNo + "&pageSize="+pageSize)
        }

        // 渲染
        $('#'+idElement).html(Mustache.render(paginateTemplate,view));

        // 绑定点击操作
        $('.page-action').click(function(e) {
            e.preventDefault();

            // 写入当前页码
            $('#'+idElement+" .pageNo").val($(this).attr("data-target"));
            var targetUrl = $(this).attr('data-url');
            if ( targetUrl != '') {
                $.ajax({
                    url : targetUrl ,
                    success : function ( result ) {
                        if (callback) {
                            callback(result,url);
                        }
                    }
                });
            }
        })
    }






</script>